<template>
    <div>
      <!-- 新增按钮 -->
      <el-button type="primary" @click="handleAdd">新增工作票</el-button>
  
      <!-- 日志列表 -->
      <el-table
        :data="list"
        border
        style="width: 100%"
        v-loading="loading"
      >
        <!-- 原有列定义 -->
        <el-table-column
          prop="workOrderId"
          label="工作订单ID"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="userId"
          label="用户ID"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="description"
          label="描述"
          width="300"
        ></el-table-column>
        <el-table-column
          prop="startDate"
          label="开始日期"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="endDate"
          label="结束日期"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="180"
        ></el-table-column>
        <!-- 新增操作列 -->
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 编辑/新增对话框 -->
      <el-dialog 
        :title="isEdit ? '编辑工作票' : '新增工作票'" 
        :visible.sync="dialogFormVisible"
        width="30%"
      >
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item label="用户ID" prop="userId">
            <el-input v-model="form.userId"></el-input>
          </el-form-item>
  
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
  
          <el-form-item label="开始日期" prop="startDate">
            <el-date-picker
              v-model="form.startDate"
              type="date"
              placeholder="选择开始日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
  
          <el-form-item label="结束日期" prop="endDate">
            <el-date-picker
              v-model="form.endDate"
              type="date"
              placeholder="选择结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
  
          <el-form-item label="描述" prop="description">
            <el-input
              type="textarea"
              :rows="3"
              v-model="form.description"
            ></el-input>
          </el-form-item>
  
          <el-form-item label="状态" prop="status">
            <el-select v-model="form.status" placeholder="请选择状态">
              <el-option label="待开始" value="待开始"></el-option>
              <el-option label="进行中" value="进行中"></el-option>
              <el-option label="已完成" value="已完成"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { 
    dygzpSelectAll,
    dygzpDelete,
    dygzpAdd,
    dygzpUpdate 
  } from "@/api/jhrz/dygzp";
  
  export default {
    data() {
      return {
        list: [], // 存储日志列表数据
        dialogFormVisible: false, // 编辑对话框的显示状态
        form: {
          workOrderId: "", // 工作票ID
          userId: "", // 用户 ID
          startDate: "", // 开始日期
          endDate: "", // 结束日期
          title: "", // 标题
          description: "", // 描述
          status: "" // 状态
        },
        loading: false,
        isEdit: false,
        rules: {
          userId: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
          startDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }],
          endDate: [{ required: true, message: '请选择结束日期', trigger: 'change' }],
          title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
          description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
          status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
        }
      };
    },
    created() {
      this.fetchData(); // 页面加载时获取数据
    },
    methods: {
      // 查询日志列表
      async fetchData() {
        this.loading = true;
        try {
          const response = await dygzpSelectAll();
          this.list = response.data.filter(log => log.isDeleted === 0); // 过滤掉已逻辑删除的记录
          console.log("更新日志列表", this.list);
        } catch (error) {
          console.error("获取数据失败", error);
          this.$message.error('获取数据失败');
        } finally {
          this.loading = false;
        }
      },
  
      // 新增操作
      handleAdd() {
        this.isEdit = false;
        this.form = JSON.parse(JSON.stringify(this.$options.data().form)); // 深拷贝
        this.dialogFormVisible = true;
      },
  
      // 编辑操作
      handleEdit(row) {
        this.isEdit = true;
        this.form = JSON.parse(JSON.stringify(row)); // 深拷贝
        this.dialogFormVisible = true;
      },
  
      // 删除操作
      handleDelete(row) {
        this.$confirm('确认删除该日志？', '提示', {
          type: 'warning'
        }).then(() => {
          dygzpDelete(row.workOrderId)
            .then(() => {
              this.$message.success('删除成功');
              this.fetchData();
            })
            .catch(error => {
              console.error("删除失败", error);
              this.$message.error('删除失败');
            });
        });
      },
  
      // 表单提交
      submitForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            const api = this.isEdit ? dygzpUpdate : dygzpAdd;
            api(this.form)
              .then(() => {
                this.$message.success(this.isEdit ? '修改成功' : '添加成功');
                this.dialogFormVisible = false;
                this.fetchData();
              })
              .catch(error => {
                console.error("提交失败", error);
                this.$message.error(this.isEdit ? '修改失败' : '添加失败');
              });
          }
        });
      }
    }
  };
  </script>